<script>
import GlobalFilterListener from './GlobalFilterListener.vue'
import CountTo from 'vue-count-to'
export default {
  name: 'focus-on-enterprises',
  components: { CountTo },
  mixins: [GlobalFilterListener],
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.rand()
    this.animate()
  },
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    animate () {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.$refs.c1?.start()
        this.$refs.c2?.start()
        this.$refs.c3?.start()
        this.$refs.c4?.start()
        this.$refs.c5?.start()
      }, 10e3)
    },
    rand () {
      const random = () => Number((Math.random() * 2000 + 500).toFixed(2))
      this.data = [random(), random(), random(), random(), random()]
    },
    eventBusHandler () {
      this.rand()
    },
  }
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="gift"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title" style="color: #1f92eb;">重点关注指标</h3>
        <p class="secondary-title" style="display: block;">Focus on enterprises</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content">
        <table class="content-table">
          <caption style="color: #fff;font-size: 16px;margin-bottom: 1rem;">关注指标</caption>
          <tbody>
            <tr>
              <th>用电量</th>
              <td><count-to ref="c1" :endVal="data[0]"></count-to>万千瓦时</td>
            </tr>
            <tr>
              <th>用煤量</th>
              <td><count-to ref="c2" :endVal="data[1]"></count-to>吨</td>
            </tr>
            <tr>
              <th>综合能耗</th>
              <td><count-to ref="c3" :endVal="data[2]"></count-to>吨标准煤</td>
            </tr>
            <tr>
              <th>工业总产值</th>
              <td><count-to ref="c4" :endVal="data[3]"></count-to>万元</td>
            </tr>
            <tr>
              <th>万元产值综合能耗</th>
              <td><count-to ref="c5" :endVal="data[4]"></count-to>千克标准煤/万元</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.block-item {
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow:  0 0 2px #02ffff, 0 0 2px rgb(1, 130, 172), inset 0 0 16px rgb(1, 130, 172);
}
.content-table {
  width: 100%;
  border-spacing: 0;
}
.content-table td,
.content-table th {
  padding: 10px;
}
.content-table th {
  color: #94bfe1;
}
.content-table td {
  color: #48eefe;
}
tbody tr:nth-child(2n-1) {
  background: linear-gradient(to right, transparent 0%, #093268 50%, transparent 100%);
}
</style>
